import React from "react"

export default class Header extends React.Component {
    state = {
        content: ''
    }
    add = (e) => {
        const { content } = this.state
        if(!content) return 

        if (e.keyCode === 27) {
            // 按了esc，取消修改
            this.setState({
                content:''
            })
          }
          if (e.keyCode === 13) {

            this.props.add(content)
            this.setState({
                content:''
            })
        }
    }
    render () {
        return (
        <header className="header">
        <h1>todos</h1>
        <input className="new-todo" placeholder="接下来打算做点啥?" autoFocus 
            value={this.state.content}
            onChange={({target})=>{this.setState({content:target.value.trim()})}}
            onKeyUp={this.add}/>
        </header>)
    }
}